@react-aria/interactions

What is @react-aria/interactions?

The @react-aria/interactions package provides hooks and utilities to manage interactivity in React applications, focusing on accessibility and user interface behavior consistency across browsers and devices.

What are @react-aria/interactions's main functionalities?

usePress

Handles all aspects of press interactions across mouse, touch, and keyboard interactions, ensuring a consistent behavior.

import {usePress} from '@react-aria/interactions';
function MyButton(props) {
  let {pressProps} = usePress({
    onPress: () => console.log('Button pressed')
  });
  return <button {...pressProps}>Press me</button>;
}

useHover

Enables handling hover interactions, providing callbacks for hover start and end, which helps in managing hover states effectively.

import {useHover} from '@react-aria/interactions';
function MyComponent(props) {
  let {hoverProps, isHovered} = useHover({
    onHoverStart: () => console.log('Hover started'),
    onHoverEnd: () => console.log('Hover ended')
  });
  return <div {...hoverProps}>{isHovered ? 'Hovering' : 'Not hovering'}</div>;
}

useFocus

Manages focus events and states, providing a consistent and accessible experience across different input methods.

import {useFocus} from '@react-aria/interactions';
function MyInput(props) {
  let {focusProps} = useFocus({
    onFocusChange: isFocused => console.log(isFocused ? 'Focused' : 'Blurred')
  });
  return <input {...focusProps} placeholder='Focus on me' />;
}

Other packages similar to @react-aria/interactions

downshift

Downshift is a library that provides primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components. It's similar to @react-aria/interactions but focuses more on dropdown and autocomplete behaviors.

react-beautiful-dnd

A higher-level abstraction primarily for drag-and-drop interactions. Unlike @react-aria/interactions, which provides general interaction hooks, react-beautiful-dnd focuses specifically on draggable elements and lists.

README

@react-aria/interactions

This package is part of react-spectrum. See the repo for more details.